<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-width: 1200px;
            overflow: auto;
        }
        span{
            display: inline-block;
            width: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="output"></div>
    <script>
        var outputBox = document.getElementById('output')
        // 第四行,每一行变化的变量作为里层循环。
        // j i
        // 1 4
        // 2 4
        // 3 4
        // 4 4
        // j最小是1，最大是i
        var str = ''
        for(var i = 1;i <= 9; i++) {
            for(var j = 1; j <= i; j++) {
                str += '<span>'+ j + '*' + i + '=' + i*j +'</span>'
            }
            str += '<br/>'
        }
        outputBox.innerHTML = str // 给元素添加html代码
    </script>
</body>
</html>